<template>
  <div class="pk-searchForm">
    <el-form ref="formRef" :inline="true" :model="formInline"  :size="size">
      <el-row :gutter="30">
        <el-form-item :label="item.label" v-for="(item, index) in config" :key="index" :prop="item.prop">
          <el-col>
            <template v-if="item.type =='input'" > 
              <el-input v-model="formInline[item.prop]" :placeholder="item.placeholder || getplaceholder(item)" clearable size="" autocomplete="off"/>
            </template>
            <template v-if="item.type =='select'" >
              <el-select v-model="formInline[item.prop]" :placeholder="item.placeholder || getplaceholder(item)" clearable style="min-width: 200px;">
                <el-option
                  v-for="a in item.options"
                  :key="a.value"
                  :label="a.label"
                  :value="a.value"
                />
              </el-select> 
            </template>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button @click="onReast(formRef)">重置</el-button>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { ref, defineProps, onMounted, defineEmits, reactive } from 'vue'
const emits = defineEmits(['onSearch'])
const formRef = ref(null)
const props = defineProps({
  size: {
    type: String,
    default: 'default'
  },
  config: {
    type: Array,
    default: () => []
  }
})
const formInline = ref({})

const getInit = () => {
  props.config.forEach(item => {
    formInline.value[item.prop] = item.value || null
  })
}

const getplaceholder = (e) => {
  const data = {
    'input': '请输入',
    'select': '请选择'
  } 
  return data[e.type] + e.label
} 


const onSearch = () => {
  emits('onSearch', formInline.value)
}


const onReast = (e) => {
  e.resetFields()
  onSearch()
}

onMounted(() => {
  getInit()
})
</script>

<style lang="scss" scoped>

</style>